'use client';

import React, { useState } from 'react';
import { Layout } from 'antd';
import AdminHeader from './components/AdminHeader';
import AdminSider from './components/AdminSider';
import AdminContent from './components/AdminContent';
import { AuthGuard } from '@/contexts/AuthContext';
import styles from './Admin.module.scss';

interface AdminLayoutProps {
  children: React.ReactNode;
  pageTitle?: string;
  extra?: React.ReactNode;
}

const AdminLayout: React.FC<AdminLayoutProps> = ({
  children,
  pageTitle,
  extra
}) => {
  const [collapsed, setCollapsed] = useState<boolean>(false);

  const handleCollapse = (collapsed: boolean) => {
    setCollapsed(collapsed);
  };

  return (
    <AuthGuard requireAdmin={true}>
      <Layout className={styles.adminLayout}>
        <AdminHeader />

        <AdminSider
          collapsed={collapsed}
          onCollapse={handleCollapse}
        />
        <AdminContent
          collapsed={collapsed}
          pageTitle={pageTitle}
          extra={extra}
        >
          {children}
        </AdminContent>
      </Layout>
    </AuthGuard>
  );
};

export default AdminLayout;